<template>
  <div class="searcher">
    <el-form :inline="true"  class="form">
        <el-form-item label="用户名">
          <el-input
              v-model="username"
              style="width: 200px"
              placeholder="请输入用户名"
          >
            <template #prefix>
              <el-icon><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>

      <el-form-item>
        <el-button
            type="primary" icon="search"
            style="width: 80px;"
            @click="handleSearch"
        >
          查询
        </el-button>
        <el-button
            icon="refresh"
            style="width: 80px;"
            @click="handleReset"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="btn-list">
    <div class="left-btns">
      <el-button
          type="primary"
          icon="plus"
          style="width: 100px;margin-right: 6px;"
          @click="handleAddUserForm"
      >
        添加用户
      </el-button>
    </div>
  </div>

  <div class="table-box">
    <el-table
        style="width: 100%;"
        :data="tableData"
    >
      <el-table-column type="index" :index="indexMethod" width="55" fixed/>
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="roles" label="用户所属角色" width="600" />
      <el-table-column prop="operation" label="操作" width="300" fixed="right" align="center">
        <template #default="scope">
<!--          <el-button type="primary" plain size="small">编辑</el-button>-->
          <el-button type="primary" plain size="small" @click="handleAssignRole(scope.row)">分配角色</el-button>
          <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="是否确认删除该系统用户信息？"
              icon-color="red"
              @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>
  </div>


  <div class="page-box">
    <div class="demo-pagination-block">
      <el-pagination
          v-model:currentPage="pageNum"
          v-model:pageSize="pageSize"
          :page-sizes="[30,10 ,20,50,100]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <el-dialog v-model="assignRoleFormVisible" title="分配角色" align-center>
    <el-select
        v-model="curRoleIds"
        multiple
        placeholder="请选择角色"
        style="width: 700px"
    >
      <el-option
          v-for="item in roleOptions"
          :key="item.id"
          :label="item.role"
          :value="item.id"
      />
    </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="assignRoleFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ackAssignRole">确定</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="addUserFormVisible" title="增加用户" align-center>
    <el-form v-model="addUser" label-width="auto">
      <el-form-item label="用户名">
        <el-input
            v-model="addUser.username"
            placeholder="请输入用户名"
            maxlength="15"
            show-word-limit
            clearable
        />
      </el-form-item>

      <el-form-item label="密码">
        <el-input
            v-model="addUser.password"
            type="password"
            placeholder="请输入密码"
            maxlength="15"
            show-word-limit
            show-password
            clearable
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="addUserFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddUser">确定</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {
  addUserFunc,
  assignRoles,
  deleteUser,
  getAllOptionalRoles,
  test,
  userPage
} from "@/pages/home/views/auth/api/user";
import {ElMessage} from "element-plus";

onMounted(() => {
  handleSearch()
})

const username = ref('')

const assignRoleFormVisible = ref(false)
const addUserFormVisible = ref(false)

const tableData = ref([])

const pageNum = ref(1)
const pageSize = ref(30)
const total = ref(0)
const roleOptions = ref([]);
const curRoleIds = ref([])
const curUserId = ref('')
const addUser = ref({
  username: '',
  password: ''
})

const handleSearch = () => {
    userPage(pageNum.value,pageSize.value,username.value).then((res) => {
    console.log(res.data.data)
    tableData.value = res.data.data.list
    total.value = res.data.data.total
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  handleSearch()
}

const indexMethod = (index) => {
  return index + 1 + (pageNum.value - 1)*pageSize.value
}

const handleCurrentChange = (val) => {
  pageNum.value = val
  handleSearch()
}
const handleReset = () => {
  username.value = ''
  handleSearch()
}

const handleAssignRole = (row) => {
  getAllOptionalRoles().then( res => {
    roleOptions.value = res.data.data
    curRoleIds.value = row.roleIds?row.roleIds.split(','):[]
    curUserId.value = row.id
    assignRoleFormVisible.value = true
  })
}

const ackAssignRole = () => {
  assignRoles(curUserId.value,curRoleIds.value).then( res => {
    assignRoleFormVisible.value = false;
    if(res.data.success === true){
      ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
      })
      handleSearch()
    }else{
      ElMessage({
        showClose: true,
        message: '操作失败',
        type: 'error',
      })
    }
  })
}


const handleAddUserForm = () => {
  addUser.value.username = ''
  addUser.value.password = ''
  addUserFormVisible.value = true
}
const handleAddUser = () => {
  addUserFunc(addUser.value).then( res => {
    addUserFormVisible.value = false
    if(res.data.success === true){
      ElMessage({
        showClose: true,
        message: '操作成功',
        type: 'success',
      })
      handleSearch()
    }else{
      ElMessage({
        showClose: true,
        message: '操作失败',
        type: 'error',
      })
    }
  })
}

const handleDelete = (value) => {
  console.log(value.id)
  deleteUser(value.id).then(res => {
    if(res.data.success === true){
      console.log(res)
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      handleSearch()
    }else{
      ElMessage({
        showClose: true,
        message: '删除失败',
        type: 'error',
      })
    }
  })
}

</script>


<style scoped>
.searcher {
  margin-left: 50px;
  margin-top: 50px;
  background-color: #F5F6F9;
  width: auto;
  height: auto;
  display: flex;
}
.searcher .form {
  margin-top: 20px;
  margin-left: 20px;
}

.table-box {
  margin-left: 50px;
}

.page-box{
  width: auto;
  height: auto;
  background-color: #FFFFFF;
}
.demo-pagination-block{
  padding: 10px;
  display: flex;
  justify-content: center;
  background-color: #F5F6F9;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.btn-list {
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin: 0 40px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.left-btns {
  display: flex;
  align-items: center;
}

</style>
